<template>
  <div class="personProgress">
    <div>姓名:{{ person.name }}</div>
    <div>年龄:{{ person.age }}</div>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script setup lang="ts">
/**
 * 1.toRefs把整个reactive的对象变成ref的响应式
 * 2.toRef是把对象中的某一个属性变成响应式的
 */
import { reactive, toRef, toRefs } from "vue";

const person = reactive({
  name: "张三",
  age: 25,
});

let { name, age } = toRefs(person);
const nl = toRef(person, "name");
console.log(nl.value);
const changeName = () => {
  name.value += "~";
};
const changeAge = () => {
  age.value += 1;
};
</script>

<style scoped lang="scss">
@import "index.module.scss";
</style>
